//轮播图
<template>
  <div class="carousel_index">
    <div class="carousel_home">
      <!-- 头部 -->
      <p class="carousel_header">
        <span class="car_text">状态</span>
        <select
          name=""
          id=""
          aria-placeholder="状态"
          class="car_select"
          v-model="SerchStatus"
        >
          <option value="1">正常</option>
          <option value="0">禁用</option>
        </select>
        <el-button type="primary" :size="size" @click="serch()"
          ><svg
            class="pd"
            t="1668948707527"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="1430"
            width="16"
            height="16"
          >
            <path
              d="M474.9 880.6C249.5 880.6 66.2 697.3 66.2 472S249.5 63.4 474.8 63.4 883.5 246.7 883.5 472 700.2 880.6 474.9 880.6z m0-776.1c-202.6 0-367.5 164.8-367.5 367.5 0 202.6 164.8 367.5 367.5 367.5S842.3 674.6 842.3 472 677.5 104.5 474.9 104.5z"
              fill="#fff"
              p-id="1431"
            ></path>
            <path
              d="M937.7 960.2c-5.3 0-10.5-2-14.6-6L733.1 764c-8-8-8-21.1 0-29.1s21.1-8 29.1 0L952.3 925c8 8 8 21.1 0 29.1-4 4.1-9.3 6.1-14.6 6.1z"
              fill="#fff"
              p-id="1432"
            ></path>
          </svg>
          搜索</el-button
        >
        <el-button type="" :size="size"
          ><svg
            t="1668948938318"
            class="pd"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2569"
            width="16"
            height="16"
          >
            <path
              d="M928.16 144H736V64a32 32 0 0 0-32-32H320a32 32 0 0 0-32 32v80H95.84a32 32 0 0 0 0 64H129.6l77.92 698.656A96 96 0 0 0 302.912 992h418.144a96.032 96.032 0 0 0 95.424-85.344L894.4 208h33.728a32 32 0 0 0 0.032-64zM352 96h320v48H352V96z m400.896 803.552a32 32 0 0 1-31.808 28.448H302.912a32 32 0 0 1-31.808-28.448L193.984 208h636.032l-77.12 691.552z"
              p-id="2570"
            ></path>
            <path
              d="M608 820.928a32 32 0 0 0 32-32V319.104a32 32 0 0 0-64 0v469.824a32 32 0 0 0 32 32zM432 820.928a32 32 0 0 0 32-32V319.104a32 32 0 0 0-64 0v469.824a32 32 0 0 0 32 32z"
              p-id="2571"
            ></path></svg
          >清空</el-button
        >
      </p>
      <!-- 表格 -->
      <avue-crud
        :data="data"
        :page="page"
        :option="option"
        class="carousel_table"
        @on-load="onLoad"
        @selection-change="selectionChange"
      >
        <template #menu-left="{ size }">
          <el-button type="primary" :size="size" @click="onAdd()"
            >+ 新增</el-button
          >
          <el-button type="danger" :size="size" @click="allDEL()"
            >批量删除</el-button
          >
        </template>
        <template #menu="{ row, index, size }">
          <el-button
            type="primary"
            :size="size"
            icon="el-icon-edit"
            @click="onedit(row, index)"
            >编辑</el-button
          >
          <el-button
            type="danger"
            :size="size"
            icon="el-icon-delete"
            @click="ondel(row, index)"
            >删除</el-button
          >
        </template>
      </avue-crud>
      <!-- 删除弹框 -->
      <el-dialog
        v-model="dialogVisible1"
        title="提示"
        width="30%"
        :before-close="handleClose"
      >
        <span>
          <svg
            t="1669016375916"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="2406"
            width="16"
            height="16"
          >
            <path
              d="M512 56.888889C261.688889 56.888889 56.888889 261.688889 56.888889 512s204.8 455.111111 455.111111 455.111111 455.111111-204.8 455.111111-455.111111-204.8-455.111111-455.111111-455.111111m0 853.333333c-221.866667 0-398.222222-176.355556-398.222222-398.222222s176.355556-398.222222 398.222222-398.222222 398.222222 176.355556 398.222222 398.222222-176.355556 398.222222-398.222222 398.222222"
              fill="#e98f36"
              p-id="2407"
            ></path>
            <path
              d="M512 682.666667c-17.066667 0-28.444444 5.688889-39.822222 17.066666-11.377778 11.377778-17.066667 22.755556-17.066667 39.822223 0 17.066667 5.688889 28.444444 17.066667 39.822222 11.377778 11.377778 22.755556 17.066667 39.822222 17.066666 17.066667 0 28.444444-5.688889 39.822222-17.066666 11.377778-11.377778 17.066667-22.755556 17.066667-39.822222 0-17.066667-5.688889-28.444444-17.066667-39.822223-11.377778-11.377778-22.755556-17.066667-39.822222-17.066666z m-51.2-455.111111l17.066667 409.6h62.577777L563.2 227.555556H460.8z"
              fill="#e98f36"
              p-id="2408"
            ></path>
          </svg>
          <span class="ondel">确定进行删除操作？</span>
        </span>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible1 = false">取消</el-button>
            <el-button type="primary" @click="YesDEL()"> 确定 </el-button>
          </span>
        </template>
      </el-dialog>
      <!-- 编辑弹框 -->
      <el-dialog
        v-model="dialogVisible"
        title="修改"
        width="30%"
        :before-close="handleClose"
      >
        <div>
          <p class="UPload">
            <span class="uploadSPan">轮播图片</span>
            <UpLoad @tupianUrl="tupianUrl" :img="img" />
          </p>
          <p>
            <span class="uploadSHUNXU">顺序</span>
            <input type="text" class="upshunxuINPUT" v-model="sql" />
          </p>
          <p>
            <span class="uploadSHUNXU">状态</span>
            <el-radio-group v-model="radio" class="carozhuangtai">
              <el-radio :label="1">正常</el-radio>
              <el-radio :label="0">禁用</el-radio>
            </el-radio-group>
          </p>
          <p>
            <span class="uploadSHUNXU">类型</span>
            <el-radio-group v-model="radio1" class="carozhuangtai">
              <el-radio :label="0">无</el-radio>
              <el-radio :label="-1">商品</el-radio>
            </el-radio-group>
          </p>
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>
            <el-button type="primary" @click="YesEdit()"> 确定 </el-button>
          </span>
        </template>
      </el-dialog>
      <!-- 新增弹框 -->
      <el-dialog
        v-model="dialogVisibleAdd"
        title="新增"
        width="30%"
        :before-close="handleClose"
      >
        <div>
          <p class="UPload">
            <span class="uploadSPan">轮播图片</span>
            <UpLoad @tupianUrl="tupianUrl" :img="img" />
          </p>
          <p>
            <span class="uploadSHUNXU">顺序</span>
            <input type="text" class="upshunxuINPUT" v-model="sql" />
          </p>
          <p>
            <span class="uploadSHUNXU">状态</span>
            <el-radio-group v-model="radio" class="carozhuangtai">
              <el-radio :label="1">正常</el-radio>
              <el-radio :label="0">禁用</el-radio>
            </el-radio-group>
          </p>
          <p>
            <span class="uploadSHUNXU">类型</span>
            <el-radio-group v-model="radio1" class="carozhuangtai">
              <el-radio :label="1">无</el-radio>
              <el-radio :label="2">商品</el-radio>
            </el-radio-group>
          </p>
        </div>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogVisibleAdd = false">取消</el-button>
            <el-button type="primary" @click="yesAdd()"> 确定 </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import request from "../../../../utils/request";
import UpLoad from "./UpLoad.vue";
import "./index.css";
import { ElMessage } from "element-plus";
export default {
  data() {
    return {
      delId: 0,
      num: 1,
      img: "",
      ABCD: "",
      sql: 0,
      SerchStatus: 1,
      page: {
        pageSize: 10,
      },
      listLength: 0,
      data: [],
      del_all: [],
      dataCopy: [],
      dialogVisible: false,
      dialogVisible1: false,
      dialogVisibleAdd: false,
      radio: 1,
      radio1: 0,
      shopId: 0,
      option: {
        selection: true,
        delBtn: false,
        editBtn: false,
        addBtn: false,
        align: "center",
        menuAlign: "center",
        border: true,

        column: [
          {
            label: "轮播图片",
            html: true,
            formatter: (val) => {
              return `<img src='https://assets.yiluxdeng.com/${val.imgUrl}' width="100" height="100" />`;
            },
          },
          {
            label: "顺序",
            prop: "seq",
          },
          {
            label: "状态",
            html: true,
            formatter: (val) => {
              return val.status == 1 ? "正常" : "禁用";
            },
          },
          {
            label: "",
            prop: "",
          },
        ],
      },
      edit: {},
    };
  },
  mounted() {
    this.getList();
  },

  methods: {
    selectionChange(list) {
      this.$message.success("选中的数据" + JSON.stringify(list));
    },
    toggleSelection(val) {
      this.$refs.crud.toggleSelection(val);
    },
    onLoad(page) {
      //模拟分页
      let LENGTH = localStorage.getItem("swiperLength");
      this.page.total = Number(LENGTH);
      this.num = page.currentPage;
      this.getList();
    },
    // 点击删除显示弹框
    ondel(row, index) {
      this.dialogVisible1 = true;
      this.delId = row.imgId;
    },
    //点击确认删除
    YesDEL() {
      this.dialogVisible1 = false;
      if (this.delId) {
        request({
          method: "DELETE",
          url: "/admin/indexImg",
          data: [this.delId],
        }).then((res) => {
          if (res.status == 200) {
            ElMessage({
              message: "删除成功",
              type: "success",
            });
            this.getList();
            this.onLoad();
          }
        });
      } else {
        request({
          method: "DELETE",
          url: "/admin/indexImg",
          data: this.del_all,
        }).then((res) => {
          if (res.status === 200) {
            ElMessage({
              message: "删除成功",
              type: "success",
            });
            this.getList();
          }
        });
      }
    },
    //点击编辑显示弹框
    onedit(row, index) {
      console.log(row)
      this.dialogVisible = true;
      this.img = row.imgUrl;
      this.sql = row.seq;
      this.radio = row.status;
      this.radio1 = row.type;
      this.imgId = row.imgId;
      this.shopId = row.shopId;
    },
    // 确认编辑
    YesEdit() {
      this.dialogVisible = false;
      request({
        method: "PUT",
        url: "/admin/indexImg",
        data: {
          des: "",
          imgId: this.imgId,
          imgUrl: this.ABCD,
          link: null,
          pic: null,
          prodName: null,
          relation: null,
          seq: this.sql,
          shopId: this.shopId,
          status: this.radio,
          t: new Date().getTime(),
          title: null,
          type: this.radio1,
          uploadTime: "2022-11-29 16:48:36",
        },
      }).then((res) => {
        if (res.status == 200) {
          ElMessage({
            message: "修改成功",
            type: "success",
          });
          this.getList();
        }
      });
    },
    // 获取数据
    getList() {
      request({
        method: "get",
        url: `/admin/indexImg/page?t=1669690738687&current=${this.num}&size=10`,
      }).then((res) => {
        this.data = res.data.records;
        this.dataCopy = res.data.records;
        this.listLength = res.data.total;
        localStorage.setItem("swiperLength", this.listLength);
      });
    },
    // 点击显示新增
    onAdd() {
      this.dialogVisibleAdd = true;
      this.ABCD = "";
      this.img = "";
    },
    // 确定新增
    yesAdd() {
      this.dialogVisibleAdd = false;
      request({
        method: "POST",
        url: "/admin/indexImg",
        data: {
          des: "",
          imgId: new Date().getTime().toString(),
          imgUrl: this.ABCD,
          relation: null,
          seq: this.sql,
          status: this.radio,
          type: -1,
        },
      }).then((res) => {
        this.data = res.data.records;
        this.getList();
        this.onLoad();
      });
    },
    // 子组件传递的参数
    tupianUrl(file) {
      this.ABCD = file;
    },
    // 搜索
    serch() {
      this.data = this.dataCopy.filter((item) => {
        return item.status == this.SerchStatus;
      });
    },
    // 批量删除
    allDEL() {
      this.dialogVisible1 = true;
    },
    // 点击多选框
    selectionChange(list) {
      this.del_all = [];
      list.forEach((item) => {
        this.del_all.push(item.imgId);
      });
    },
  },
  components: {
    UpLoad,
  },
};
</script>
<style scoped>
@import url("./index.css");
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>